<template>
    <div id="app">
       <transition mode="out-in">
       <keep-alive :max="10">
     </keep-alive>
       </transition>
       <router-view></router-view>
       <van-tabbar v-model="active" route>
            <van-tabbar-item icon="home-o" to="/home/index">首页</van-tabbar-item>
            <van-tabbar-item icon="fire-o" to="/home/bao">爆爆团</van-tabbar-item>
            <van-tabbar-item icon="todo-list-o" to="/home/dingdan">订单</van-tabbar-item>
            <van-tabbar-item icon="contact" to="/home/mine">我的</van-tabbar-item>
        </van-tabbar>
     </div>
   </template>
   
   <script>
  
   export default {
     data(){
       return {
        active:0
       }
     }
   }
   </script>
   <style lang="scss" scoped>
// //    * {
// //      margin: 0;
// //      padding: 0;
// //    }
// //    a {
// //      text-decoration: none;
// //    }
// //     .btn {
// //      position: fixed;
// //      bottom: 0;
// //      height: 50px;
// //      width: 100%;
// //      display: flex;
// //      justify-content: space-around;
// //      align-items: center;
// //      background: #fff;
// //      border-top: 1px solid #ccc;
// //     }
// //     .router-link-exact-active {
// //      color: skyblue;
// //      font-weight: bold;
// //      font-size: 17px;
// //     }
//     //--------设置切换页面动画------------
//     .v-enter{ // 动画开始时的状态
//      transform: rotate(0deg);
//    }
//    .v-enter-active{
//      transition: all 0.2s;
//    }
//    .v-enter-to{ // 动画结束时的状态
//      transform:  rotate(360deg);
//    }
   
//    //离场动画
//    .v-leave{ // 动画开始时的状态
//      transform:  rotate(360deg);
//    }
//    .v-leave-active{
//      transition: all 0.2s;
//    }
//    .v-leave-to{ // 动画结束时的状态
//      transform:  rotate(0deg);
//    }
   </style>
   